<template>
  <view v-if="cartList[cartIndex]">
    <u-overlay :show="show" @click="changeShow"  duration="200">
      <!-- 阻止冒泡到上一层元素绑定的事件 -->
      <view class="overlay" @tap.stop>
        <view class="model">
          <view class="flex justify-between u-border-bottom padding-10">
            <view>
              <image class="flexImg" :src="cartList[cartIndex].img" mode="heightFix"></image>
            </view>
            <view class="modelRight text-left flex-1">
              <view class="flex justify-between">
                <view class="margin-bottom-10">
                  <view class="bold margin-bottom-10 color-2c" v-if="cartList[cartIndex].name">{{ cartList[cartIndex].name }}
                  </view>
                  <view><text class="ellipsis">{{ cartList[cartIndex].french }}</text></view>
                </view>
                <text class="iconfont icon-chahao edit margin-bottom-10" @click="changeShow"></text>
              </view>
              <view class="flex justify-between"><text class="bold">￥{{ cartList[cartIndex].price
							}}</text></view>
            </view>
          </view>
          <view class="drop flex padding-10 justify-between u-border-bottom">
            <text>规模选择</text>
            <view>
              <view class="flex" @click="dropShow">
                {{ cartList[cartIndex].list[dropIdx].spec }}

                <text v-if="cartList[cartIndex].list[dropIdx].edible">
                  - {{ cartList[cartIndex].list[dropIdx].edible }}
                </text>

                <u-icon name="arrow-down"></u-icon>
              </view>
              <view class="drop-list" v-show="drop">
                <view class="padding" v-for="(item, index) in cartList[cartIndex].list" :key="index"
                  @click="handleDropList(index)">
                  <text class="padding-right-xs">{{ item.spec }}
                    <text v-if="item.edible">
                      - {{ item.edible }}
                    </text>
                  </text>
                </view>
              </view>
            </view>
          </view>
          <view class="flex justify-between padding-10">
            <text>数量选择</text>
            <u-number-box v-model="num" bgColor="#ffe32a" @change='handleNum' integer></u-number-box>
          </view>
          <view class="flex justify-between">
            <u-button @click='changeShow' class='left' text="取消" color='#888'></u-button>
            <u-button @click='handleOk' class='right' text="确认" color='#ffe32a'></u-button>
          </view>
        </view>
      </view>
    </u-overlay>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations,
    mapGetters
  } from 'vuex'
  export default {
    name: "cart-overlay",
    data() {
      return {
        drop: false,
      }
    },
    computed: {
      ...mapState({
        cartList: state => state.cart.cartList
      }),
      show() {
        return this.$store.state.cart.show
      },
      cartIndex() {
        return this.$store.state.cart.cartIndex
      },
      dropIdx() {
        return this.$store.state.cart.dropIdx
      },
      num: {
        get() {
          return this.cartList[this.cartIndex]?.goods_count || 0
        },
        set(num) {
          this.$store.commit('cart/changeNum', num)
        }
      },
    },
    methods: {
      changeShow() {
        this.$store.commit('cart/changeShow', false)
      },
      dropShow() {
        this.drop = !this.drop
      },
      handleDropList(dropIdx) { // 子商品下拉列表
        this.drop = false
        this.$store.commit('cart/changeDropIdx', dropIdx)
      },
      handleOk() { // 弹窗确定
        // let {
        //   cartIndex,
        //   dropIdx
        // } = this
        // this.$store.commit('cart/cartListCheckMut', {
        //   cartIndex,
        //   dropIdx
        // })
        // this.$store.commit('cart/changeCartNum', {
        //   cartIndex
        // })
        this.$store.commit('cart/saveEditValue', false)
        this.$store.commit('cart/changeShow', false)
      },
      handleNum({
        value
      }) {
        console.log(value);
        this.$store.commit('cart/changeNum', value)
      }
    }
  }
</script>

<style lang="scss">
  .overlay {
    background-color: #fff;
    // padding: 20rpx;
    border-radius: 20rpx;
    margin: 50% 5%;
    width: 90%;

    .model {
      .flexImg {
        width: 200rpx;
        height: 200rpx;
        margin-right: 10rpx;
      }
    }
    .ellipsis{
      display: block;
      width: 320rpx;
    }

  }

  /deep/ .right {
    color: #000 !important;
    font-size: 100rpx;
    height: 100rpx;
    border-radius: 0 0 20rpx 0;
  }

  /deep/ .left {
    height: 100rpx;
    border-radius: 0 0 0 20rpx;

  }

  /deep/ .u-button__text {
    font-size: 35rpx !important;
  }

  // /deep/ .u-number-box__plus{
  // background-color: #ffe32a !important;
  // }
  // 弹窗下拉
  .drop {
    position: relative;

    .drop-list {
      position: absolute;
      z-index: 111;
      background-color: white;
      width: 350rpx;
      top: 75rpx;
      right: 0;
      text-align: end;
      // margin-right: 30rpx;
      border: 1px solid beige;

      .padding:hover {
        background-color: #888888;
      }
    }
  }
</style>
